<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        银行管理
                        &#X3000;
                        <label class="label_style_slect">银行名称：</label>
                        <el-select v-model="form.id" placeholder="请选择银行名称" @change="bankFilter()" class="select_it_style">
                            <el-option
                                    v-for="item in headOffice"
                                    :key="item.id"
                                    :label="item.bank_name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <label class="label_style_slect">地区：</label>
                        <FormAddress ref="addressArry" v-model="form.addressArray" @input="bankFilter()" class="select_it_style" :addressFilterSource="addressFilterSource"></FormAddress>
                        <el-button type="primary" size="small" @click="addBank()">新增银行</el-button>
                        <!--<el-button type="primary" size="small" @click="addBank()" class="add_bank_btn">新增银行</el-button>-->
                    </div>
                    <div class="leave_right choose_right_input">
                        <el-input type="text" placeholder="请输入关键字" v-model="form.keyword" clearable @clear="bankFilter()"></el-input><el-button type="primary" size="small" @click="bankFilter()">搜索</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="head_bank_id" label="总行ID"> </el-table-column>
            <el-table-column prop="head_bank_name" label="总行名称"> </el-table-column>
            <el-table-column prop="bank_name" label="银行名称"> </el-table-column>
            <el-table-column prop="bank_number" label="银行行号"> </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editBankInfo(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogInput ref="editBankDialog" title="银行信息">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="120px" size="small">
                    <el-form-item label="银行名称：">
                        <el-col :span="24">
                            <el-input type="text" v-model="form.bank_name" placeholder="请输入银行名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-col :span="24">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    v-model="form.description"
                                    placeholder="请输入角色描述">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmEditBank()">保存</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="addBankDialog" title="银行信息">
            <div class="rem-dialog-con">
                <el-form :model="addForm" label-width="120px" size="small">
                    <el-form-item label="总行：">
                        <el-col :span="24" style="text-align: left;">
                            <el-select v-model="addForm.id" placeholder="请选择银行名称">
                                <el-option
                                        v-for="item in headOffice"
                                        :key="item.id"
                                        :label="item.bank_name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="地区：">
                        <el-col :span="24" style="text-align: left;">
                            <FormAddress ref="addressArryAdd" v-model="addForm.addressArryAdd"></FormAddress>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="银行行号：">
                        <el-col :span="24">
                            <el-input type="text" v-model="addForm.bank_number" placeholder="请输入银行名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="银行名称：">
                        <el-col :span="24">
                            <el-input type="text" v-model="addForm.bank_name" placeholder="请输入银行名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="描述：">
                        <el-col :span="24">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    v-model="addForm.description"
                                    placeholder="请输入角色描述">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddBank()">添加</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    import FormAddress from '@component/common/FormAddress.vue';
    @Component({
        extends: Pagination,
        components: {
            DialogInput,
            FormAddress
        }
    })
    export default class BankManage extends Vue {
        addressFilterSource: string = 'bankManage';
        form = {
            bank_name: '',
            description: '',
            id: '',
            bankAddressId: '',
            keyword: '',
            addressArray: []
        }
        addForm = {
            bank_name: '',
            description: '',
            head_bank_id: '',
            bankprovince: '',
            bank_address_id: '',
            bank_number: '',
            addressArryAdd: []
        }
        headOffice = []
        tableData = []
        // 获取总行信息
        async getAllHeadOffice () {
            let res = await this.$http.get('banks/bankNext')
            if (res.status == 200) {
                this.headOffice = res.data;
            }
        }
        // 获取银行列表（分页）
        async getAllBankList () {
            this.form.bankAddressId = this.form.addressArray[this.form.addressArray.length - 1]
            let params = {
                n: this.pagination.pageSize,
                p: this.pagination.currentPage,
                headBankId: this.form.id,
                bankAddressId: this.form.bankAddressId,
                keyword: this.form.keyword
            }
            let res = await this.$http.get('banks/bank',{params})
            if (res.status == 200) {
                let { banks, page_info } = res.data
                this.tableData = banks;
                this.pagination.total = page_info.items_number;
            }
        }
        editBankInfo (data) {
            this.form.bank_name = data.bank_name;
            this.form.description = data.description;
            this.form.id = data.id;
            this.$refs['editBankDialog'].openDialog()
        }
        async confirmEditBank () {
            if (this.form.bank_name == '') {
                this.$alert('请输入银行名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let postData = {
                bank_name: this.form.bank_name,
                description: this.form.description
            }
            let res = await this.$http.put(`banks/bank/${this.form.id}`, postData)
            if (res.status == 200) {
                this.$refs['editBankDialog'].closeDialog();
                this.getAllBankList();
            }
        }


        addBank () {
            this.$refs['addBankDialog'].openDialog();
        }
        async confirmAddBank () {
            if (this.addForm.bank_name == '') {
                this.$alert('请输入银行名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.addForm.bank_number == '') {
                this.$alert('请输入银行行号！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            // this.addForm.bank_address_id = this.addForm.addressArryAdd.pop();
            if (this.addForm.addressArryAdd.length >= 2) {
                this.addForm.bank_address_id = this.addForm.addressArryAdd[this.addForm.addressArryAdd.length - 1];
            }
            let postData = {
                head_bank_id: this.addForm.id,
                bank_name: this.addForm.bank_name,
                bank_number: this.addForm.bank_number,
                description: this.addForm.description,
                bank_address_id: this.addForm.bank_address_id
            }
            let res = await this.$http.post('banks/bank', postData)
            if (res.status == 201) {
                this.$refs['addBankDialog'].closeDialog();
                this.getAllBankList();
            }
        }
        bankFilter () {
            // if (this.form.addressArray.length > 2) {
            //     this.form.bankAddressId = this.form.addressArray[this.form.addressArray.length - 1]
            // }
            this.getAllBankList()
        }
        closeDialog () {
            this.$refs['editBankDialog'].closeDialog();
            this.$refs['addBankDialog'].closeDialog();
        }
        loadDataForPagination() {
            this.getAllBankList()
        }
        mounted () {
            this.getAllHeadOffice();
            this.getAllBankList()
        }
    }
</script>
<!--<style lang="scss" scoped>-->
    <!--.leave_left {-->
        <!--position: relative;-->
        <!--.add_bank_btn {-->
            <!--position: absolute;-->
            <!--right: -6px;-->
            <!--top: 1px;-->
        <!--}-->
    <!--}-->
<!--</style>-->
<style lang="scss">
    .select_it_style {
        .el-input__inner {
            height: $height-int;
            width: 220px;
        }
    }
</style>
